<!--
 * @Author: your name
 * @Date: 2021-08-24 13:45:50
 * @LastEditTime: 2021-10-18 21:34:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\footer.vue
-->
<template>
    <div class="breadCrumb">
        <!-- 这里后期出现 结构布局可以放开 -->
        <!-- <div class="breadCrumb_applogo" :style="{width:autoLayout?'200px':'80px'}">
                        <div class="breadCrumb_applogo_img">
                                <img src="@/assets/image/use.png" alt="logo">
                        </div>
                        <div v-if="autoLayout" class="breadCrumb_applogo_name">LOGO</div>
            </div> -->
        <div class="breadCrumb_router">
            <div class="breadCrumb_router_bar" @click="changeTrigter">
                <svg-icon
                    v-show="getTriggersStatus"
                    icon-class="open"
                    size="1.3"
                ></svg-icon>
                <svg-icon
                    v-show="!getTriggersStatus"
                    icon-class="hide"
                    size="1.3"
                ></svg-icon>
            </div>
            <div v-show="getRouterStatus" class="breadCrumb_router_list">
                <Breadcrumb class="rows" separator="">
                    <BreadcrumbItem
                        v-for="(item, index) in routerArr.status"
                        :key="index"
                        class="items"
                    >
                        <template #separator >
                          <div v-show="index!=routerArr.status.length-1">
                              /
                          </div>
                        </template> 
                        <div :class="['items']">
                            <span>{{ $t(item) }}</span>
                        </div>
                    </BreadcrumbItem>
                </Breadcrumb>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Breadcrumb } from 'ant-design-vue'
import { defineComponent, reactive, unref, watchEffect, computed } from 'vue'
import { useRouter } from 'vue-router'
import { setTrigter, routerTrigger } from '../../setting/menuTrigger'
import { SetTheme } from '../../setting/theme'

export default defineComponent({
    name: 'LayoutBreadcrumb',
    components: { [Breadcrumb.name]: Breadcrumb,
      BreadcrumbItem:Breadcrumb.Item
    },
    props: {
        autoLayout: {
            type: Boolean,
        },
    },
    setup() {
  
        const { currentRoute } = useRouter();
        let { menuTriggers } = setTrigter();
        //  路由导航显示
        let { routerRefsValue } = routerTrigger()
        let routerArr = reactive({
            status: [],
        })
        const getTriggersStatus = computed(() => {
            const status = unref(menuTriggers)
            return status
        })
        const getRouterStatus = computed(() => {
            const status = unref(routerRefsValue)
            return status
        })
        //  watchEffect 不需要指定监听的属性，他会自动的收集依赖
        watchEffect(async () => {
            // 直接将名称 写在name下
            let matched = currentRoute.value.matched
            routerArr.status = []
            matched.forEach((item) => {
                routerArr.status.push(item.name)
            })
        })
        // 折叠菜单
        const changeTrigter = () => {
            setTrigter()
        }
        // 主题
        let { themeColors } = SetTheme()
        // 响应式主题配置
        const getHeaderClass = computed(() => {
            const theme = unref(themeColors)
            return [`primary-${theme}-color`]
        })
        return {
            routerArr,
            getTriggersStatus,
            getRouterStatus,
            changeTrigter,
            getHeaderClass,
        }
    },
})
</script>

<style lang="less" scoped>
@import "../../styles/commit.less";
.pointer {
}
/deep/ .ant-breadcrumb-link {
  margin: 0 !important;
}
.items {
  display: inline-block;
  font-size: 13px;
  font-weight: 100;
  font-family: Arial, Helvetica, sans-serif;
  span {
    margin: 0 !important;
    font-size: 12px;
  }
}
.dirow() {
  display: flex;
  align-items: center;
  justify-content: center;
}
.breadCrumb {
  .dirow();
  font-weight: bold;
  .pointer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &_router {
    &_bar {
      margin-left: 1rem;
    }
    .dirow();
    height: 100%;
    & > div {
      height: 100%;
      display: inline-block;
      cursor: pointer;
      &:nth-of-type(1) {
        margin-right: 20px;
        .dirow();
      }
    }
    &_list {
      .rows {
        .dirow();
        .items {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  &_applogo {
    width: 200px;
    height: 100%;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in 0s;
    & > div:nth-of-type(1) {
      width: 80px;
      text-align: center;
      //   background: red;
      img {
        width: 2rem;
        height: 2rem;
      }
    }
    & > div:nth-of-type(2) {
      flex: 1;
    }
    &:hover {
      cursor: pointer;
      opacity: 0.6;
    }
  }
}
</style>
